{include file="public/header-static"/}
{include file="public/sidebar"/}
<div id="main">
    {include file="public/header"/}
    <div class="main-content">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="row">

                        <div class="col-md-12">
                            <div class="card bor">
                                <div class="card-dth">
                                    <div class="user-name" style="text-align: left;">
                                        上门服务数据
                                    </div>
                                    <div class="d-cnter">
                                        <div class="item">
                                            <canvas id="serviceCount" width="170" height="170"></canvas>
                                            <p class="amount" style="color: #576AFBFF;">{$service_data.countService}</p>
                                            <div>
                                                总数
                                            </div>
                                            <p>&nbsp;</p>
                                        </div>
                                        <div class="item">
                                            <canvas id="serviceApproval" width="170" height="170"></canvas>
                                            <p class="amount" style="color: #576AFBFF;">{$service_data.endService}</p>
                                            <div>
                                                已完成
                                            </div>
                                            <p>占所有数据的 {$service_data.endServiceScale}</p>
                                        </div>
                                        <div class="item">
                                            <canvas id="serviceReject" width="170" height="170"></canvas>
                                            <p class="amount" style="color: #FF6739FF;">{$service_data.visitService}</p>
                                            <div>
                                                服务中
                                            </div>
                                            <p>占所有数据的 {$service_data.visitServiceScale}</p>
                                        </div>
                                        <div class="item">
                                            <canvas id="serviceUnreviewed" width="170" height="170"></canvas>
                                            <p class="amount" style="color: #00A0FFFF;">{$service_data.waitService}</p>
                                            <div>
                                                待服务
                                            </div>
                                            <p>占所有数据的 {$service_data.waitServiceScale}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="list">
                <!--                <div class="uname">用户列表</div>-->
                <div class="app-action">
                    <div class="action-right">
                        <div class="input-group">
                            <input type="text" name="keywords" id="keywords" autofocus="autofocus"
                                   value="{$Request.get.keywords}" class="form-control"
                                   placeholder="昵称|姓名|手机号|企业名称"
                                   aria-describedby="button-addon1">
                            <div class="input-group-append">
                                <button class="btn btn-outline-light" type="submit" id="button-addon1">
                                    <i data-feather="search"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="app-block">
                    <div class="app-content">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="card">
                                    <table id="linkstable" lay-filter="linkstable"></table>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>


            </div>
        </div>
    </div>
    {include file="public/footer"/}
</div>
<script src="__STATIC__/vendors/charts/chartjs/chart.min.js"></script>
<script src="__STATIC__/vendors/charts/apex/apexcharts.min.js"></script>
<script src="__STATIC__/vendors/circle-progress/circle-progress.min.js"></script>
<script src="__STATIC__/assets/js/examples/dashboard.js"></script>
<script src="__STATIC__/assets/js/examples/echarts.js"></script>
<script src="__STATIC__/assets/js/custom.js"></script>
<script type="text/html" id="barDemo">
    {{# if(d.status == 0) { }}
    <button onclick="changeStatus({{d.id}},1)" lay-event="waitChangeStatus" class="btn btn-sm btn-outline-secondary">
        待服务
    </button><br>
    <button onclick="edit({{d.id}},1)" lay-event="edit" class="btn btn-sm btn-outline-secondary">编辑</button><br>
    {{# } else if(d.status == 1) { }}
    <button onclick="changeStatus({{d.id}},2)" lay-event="loadChangeStatus" class="btn btn-sm btn-outline-secondary">
        服务中
    </button><br>
    {{# } else { }}
    <button class="btn btn-sm btn-outline-secondary" id="dis">已完成</button><br>
    {{# } }}

    {{# if(d.status != 0) { }}
    <button onclick="show({{d.id}},1)" lay-event="show" class="btn btn-sm btn-outline-secondary">详情</button><br>
    {{# } }}
</script>
<script>
    $('.main-content').scrollTop('0')
    // 总数
    var chartDom = document.getElementById('serviceCount');
    var myChart = echarts.init(chartDom);
    var option = {
        title: {
            //标题内容
            textStyle: {
                fontWeight: 'bold',
                fontFamily: 'Microsoft YaHei',
                fontSize: 24
            },
            //标题位置
            top: '5%',
            left: '5%'
        },
        //环形中间文字
        graphic: [
            //第一行文字
            //内容 + 位置
            {
                type: 'text',
                left: '35%',
                top: '45%',
                style: {
                    //value当前进度
                    text: "总数",
                    textAlign: 'center',
                    fill: '#000',
                    fontSize: 22,
                    fontWeight: 'bold'
                }
            },
        ],
        series: [{
            type: 'pie',
            radius: ['61%', '53%'],//['外圆大小', '内圆大小']
            center: ['48%', '50%'],//圆心位置['左右'， '上下']
            hoverAnimation: false,//取消鼠标悬停动画
            animationEasing: 'cubicOut',//设置动画缓动效果
            //取消显示饼图自带数据线条
            labelLine: {
                normal: {
                    show: false
                }
            },
            //增加阴影效果
            itemStyle: {
                normal: {
                    shadowBlur: 200,
                    shadowColor: 'rgba(44, 196, 196, 0.8)'
                }
            },
            data: [
                {value: "{$service_data.countService}"},
            ]
        }]
    };
    myChart.setOption(option);

    // 已完成
    var chartDom = document.getElementById('serviceApproval');
    var myChart = echarts.init(chartDom);
    var option = {
        title: {
            //标题内容
            textStyle: {
                fontWeight: 'bold',
                fontFamily: 'Microsoft YaHei',
                fontSize: 24
            },
            //标题位置
            top: '5%',
            left: '5%'
        },
        //环形中间文字
        graphic: [
            //第一行文字
            //内容 + 位置
            {
                type: 'text',
                left: 'center',
                top: '45%',
                style: {
                    //value当前进度
                    text: "{$service_data.endServiceScale}",
                    textAlign: 'center',
                    fill: '#000',
                    fontSize: 22,
                    fontWeight: 'bold'
                }
            },
        ],
        series: [{
            type: 'pie',
            radius: ['61%', '53%'],//['外圆大小', '内圆大小']
            center: ['48%', '50%'],//圆心位置['左右'， '上下']
            hoverAnimation: false,//取消鼠标悬停动画
            animationEasing: 'cubicOut',//设置动画缓动效果
            //取消显示饼图自带数据线条
            labelLine: {
                normal: {
                    show: false
                }
            },
            //增加阴影效果
            itemStyle: {
                normal: {
                    shadowBlur: 200,
                    shadowColor: 'rgba(44, 196, 196, 0.8)'
                }
            },
            data: [
                //(maxValue进度条最大值 - value当前进度) + 颜色
                {
                    value: "{$service_data.endLastService}",
                    itemStyle: {
                        normal: {
                            color: '#E0E0E0'
                        }
                    }
                },
                //value当前进度 + 颜色
                {
                    value: "{$service_data.endService}",
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    {offset: 0, color: '#4a39edFF'},
                                    {offset: 1, color: '#5b78ffFF'}
                                ])
                        }
                    }
                },
            ]
        }]
    };
    myChart.setOption(option);

    // 服务中
    var chartDom = document.getElementById('serviceReject');
    var myChart = echarts.init(chartDom);
    var option = {
        title: {
            //标题内容
            textStyle: {
                fontWeight: 'bold',
                fontFamily: 'Microsoft YaHei',
                fontSize: 24
            },
            //标题位置
            top: '5%',
            left: '5%'
        },
        //环形中间文字
        graphic: [
            //第一行文字
            //内容 + 位置
            {
                type: 'text',
                left: 'center',
                top: '45%',
                style: {
                    //value当前进度
                    text: "{$service_data.visitServiceScale}",
                    textAlign: 'center',
                    fill: '#000',
                    fontSize: 22,
                    fontWeight: 'bold'
                }
            },
        ],
        series: [{
            type: 'pie',
            radius: ['61%', '53%'],//['外圆大小', '内圆大小']
            center: ['48%', '50%'],//圆心位置['左右'， '上下']
            hoverAnimation: false,//取消鼠标悬停动画
            animationEasing: 'cubicOut',//设置动画缓动效果
            //取消显示饼图自带数据线条
            labelLine: {
                normal: {
                    show: false
                }
            },
            //增加阴影效果
            itemStyle: {
                normal: {
                    shadowBlur: 200,
                    shadowColor: 'rgba(44, 196, 196, 0.8)'
                }
            },
            data: [
                //(maxValue进度条最大值 - value当前进度) + 颜色
                {
                    value: "{$service_data.visitLastService}",
                    itemStyle: {
                        normal: {
                            color: '#E0E0E0'
                        }
                    }
                },
                //value当前进度 + 颜色
                {
                    value: "{$service_data.visitService}",
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    {offset: 0, color: '#ff4438FF'},
                                    {offset: 1, color: '#ffa13bFF'}
                                ])
                        }
                    }
                },
            ]
        }]
    };
    myChart.setOption(option);

    // 待服务
    var chartDom = document.getElementById('serviceUnreviewed');
    var myChart = echarts.init(chartDom);
    var option = {
        title: {
            //标题内容
            textStyle: {
                fontWeight: 'bold',
                fontFamily: 'Microsoft YaHei',
                fontSize: 24
            },
            //标题位置
            top: '5%',
            left: '5%'
        },
        //环形中间文字
        graphic: [
            //第一行文字
            //内容 + 位置
            {
                type: 'text',
                left: 'center',
                top: '45%',
                style: {
                    //value当前进度
                    text: "{$service_data.waitServiceScale}",
                    textAlign: 'center',
                    fill: '#000',
                    fontSize: 22,
                    fontWeight: 'bold'
                }
            },
        ],
        series: [{
            type: 'pie',
            radius: ['61%', '53%'],//['外圆大小', '内圆大小']
            center: ['48%', '50%'],//圆心位置['左右'， '上下']
            hoverAnimation: false,//取消鼠标悬停动画
            animationEasing: 'cubicOut',//设置动画缓动效果
            //取消显示饼图自带数据线条
            labelLine: {
                normal: {
                    show: false
                }
            },
            //增加阴影效果
            itemStyle: {
                normal: {
                    shadowBlur: 200,
                    shadowColor: 'rgba(44, 196, 196, 0.8)'
                }
            },
            data: [
                //(maxValue进度条最大值 - value当前进度) + 颜色
                {
                    value: "{$service_data.waitLastService}",
                    itemStyle: {
                        normal: {
                            color: '#E0E0E0'
                        }
                    }
                },
                //value当前进度 + 颜色
                {
                    value: "{$service_data.waitService}",
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    {offset: 0, color: '#322ffdFF'},
                                    {offset: 1, color: '#00c7ffFF'}
                                ])
                        }
                    }
                },
            ]
        }]
    };
    myChart.setOption(option);


    function changeStatus(id, tips) {
        console.log(id);
        var text = '是否上门服务？';
        if (tips != 1) {
            text = '是否服务完成？';
        }
        layer.confirm(text, {icon: 3, title: '提示'}, function (index) {
            $.post("{:url('/service/changeStatus')}", {id: id, tips: tips}, function (res) {
                // console.log(res)
                if (res['code'] != 1) {
                    toastr.error(res['msg']);
                } else {
                    window.location.reload();
                }
            });
            layer.close(index);
        });
    }

    function edit(id) {
        window.location.href = '{:url("/service/serviceEdit")}?id=' + id;
    }

    function show(id) {
        window.location.href = '{:url("/service/serviceShow")}?id=' + id;
    }

    // layui插件
    layui.use('table', function () {
        var table = layui.table
            , form = layui.form;
        // 表格初始化
        table.render({
            elem: '#linkstable'
            , skin: 'line' //行边框风格
            , even: true //开启隔行背景
            , url: '{:url("/service/index")}'
            , method: 'post'
            , page: true //开启分页
            , cols: [[
                {field: 'nickname_data', title: '头像/昵称'}
                , {field: 'ids', title: '序号/用户ID'}
                , {field: 'mobile_data', title: '姓名/手机号'}
                , {field: 'company_data', title: '企业名称/详细地址'}
                , {field: 'service_data', title: '服务码/社群编号'}
                , {field: 'create_data', title: '上门/服务/完成时间'}
                , {field: 'rightbtn', title: '操作', align: 'center', toolbar: '#barDemo'}
            ]],
            done: function (res) {
                var element = $('td[data-field="rightbtn"]').children('.layui-table-cell');
                element.css('overflow', 'visible');
                element.children('.dropdown-menu').css('min-width', 'auto');
            },
            parseData: function (res) {
                return {
                    "code": res.code,
                    "msg": res.msg,
                    "count": res.data.count,
                    "data": res.data.list
                };
            }
        });

        // 搜索
        $('#button-addon1').on('click', function () {
            var keywords = $("#keywords").val();
            table.reload('linkstable', {
                url: '{:url("/service/index")}'
                , where: {
                    keywords: keywords // 搜索参数
                }
                , page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
        });

    });
</script>
<style>
    .activeBtn {
        color: #fff !important;
        background-color: #3F6EFFFF !important;
    }

    .list-title {
        display: flex;
        margin-bottom: 5px;
        align-items: center;
    }

    .list-title .item {
        font-size: 14px;
        background-color: #F0F0F0FF;
        color: #999999FF;
        display: grid;
        place-items: center;
        margin-right: 20px;
        cursor: pointer;

        border-radius: 3px;
        line-height: 32px;
        height: 32px;
        padding-left: 10px;
        padding-right: 10px;

    }

    .d-cnter {
        display: flex;
        flex-wrap: wrap;
    }

    .d-cnter .item {
        margin-left: 30px;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        margin-bottom: 20px;
    }

    .d-cnter .item div {
        color: #2E3033FF;
        font-family: 'AliM';
    }

    .d-cnter .item p:nth-last-child(1) {
        color: #999999FF;
    }

    .add {
        background: rgba(63, 110, 255, 0) !important;
        border: 1px solid #3F6EFF;
        border-radius: 6px;
        color: #3F6EFF !important;
    }

    .sel-dfx {
        display: flex;
        justify-content: space-between;
        margin: auto;
    }

    .sel-mat-top {
        margin-top: 40px;
        margin-bottom: 40px;
    }

    .avt {
        background: #3F6EFF !important;
        color: #FFFFFF !important;
    }

    .sel-bottom {
        background: #F0F0F0;
        border-radius: 3px;
        cursor: pointer;
        color: #999999;
        line-height: 32px;
        height: 32px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .sel-bottom:active {
        background: #3377FF;
    }

    .card-dth {
        padding: 8px;
    }

    .user-name {
        font-size: 16px;
        font-family: 'AliM';
        font-weight: 500;
        color: #0E1525;
        margin-left: 10px;
        text-align: center;
    }

    .user {
        display: flex;
        justify-content: space-between;
    }

    .user {
        width: 96%;
        margin: auto;
        color: #0E1525;

    }

    .bg-txt {
        display: flex;
        margin-top: 5px;
    }


    .str {
        font-size: 12px;
        margin-left: 3px;
        color: #999999;
    }


    .d-fix {
        display: flex;
        justify-content: space-between;
        padding-top: 25px;
        padding-bottom: 20px;
    }

    .rig-img img {
        width: 9rem;
        height: 9rem;
    }

    .j {
        background: #5B78FF;
        width: 10px;
        height: 10px;
        margin-top: 3px;
    }

    .bz {
        background: #22b9ff;
        width: 10px;
        height: 10px;
        margin-top: 3px;
    }

    .dy {
        background: #28a745;
        width: 10px;
        height: 10px;
        margin-top: 3px;
    }

    .jn {
        background: #F74AFF;
        width: 10px;
        height: 10px;
        margin-top: 3px;
    }

    .bg-str {
        font-family: 'AliM';
        text-align: center;
    }

    .u-rig {
        display: flex;
        justify-content: space-between;
        width: 92%;
        margin: auto;
        padding-top: 10px;
        padding-bottom: 30px;
    }

    .txt-cen {
        text-align: center;
    }

    .list {
        background: white;
        /*height: 100vh;*/
        padding: 20px;
        border-radius: 5px;
    }

    .uname {
        font-size: 18px;
        font-family: 'AliM';
        margin-bottom: 15px;
    }

    .fix-d {
        display: flex;
        justify-content: space-between;
        padding-bottom: 10px;
    }

    .d-th {
        padding-left: 10px;
        text-align: center;
    }

    .numer {
        font-size: 21px;
        font-family: 'AliM';
        font-weight: 600;
    }

    .t {
        color: #576AFB;
    }

    .d-str {
        font-size: 12px;
        font-family: 'AliM';
        margin-top: 5px;
    }

    .d-add {
        font-size: 11px;
        color: #999999;
        margin-top: 5px;
    }

    .b {
        color: #FF6739;
    }

    .w {
        color: #00A0FF;
    }

    .keword {
        display: flex;
    }

    .key-input {
        padding-left: 8px;
        border: 1px solid #e2d7d7;
        border-radius: 6px;
        width: 200px;
    }

    .key-bottom {
        margin-left: 10px;
        background: #007bff;
        padding-left: 20px;
        padding-right: 20px;
        border-radius: 34px;
        line-height: 30px;
        color: white;
        height: 30px;
        margin-top: 5px;
        cursor: pointer
    }

    .key-bottom:active {
        background: #71a2d8;
    }
</style>
</body>
</html>
